<!DOCTYPE html>
<html lang="en"  ng-app="myApp" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css">
    <script src="libs/angular.js"></script>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>

    <style>
        .content{width:200px;height:200px; border:solid 1px #000;padding:10px;}
        p{width:300px;height:300px;border:solid 1px #F00;}
        .table1{border:solid 1px #F00;line-height: 40px;height:100px;overflow: hidden;}
    </style>
</head>
<body ng-controller="myCtrl">

<div>{{firstName}}-{{lastName}}</div>

<div class="content" scroll-bar-directive>
    <p></p>
</div>

<table class="table1" scroll-bar-directive>
    <thead>
    <tr>
    <th>列头一</th>
    <th>列头二</th>
    <th>列头三</th>
    <th>列头四</th></tr>
    </thead>

    <tbody>
    <tr>
        <td>内容一</td>
        <td>内容二</td>
        <td>内容三</td>
        <td>内容四</td>
    </tr>
    <tr>
        <td>内容一</td>
        <td>内容二</td>
        <td>内容三</td>
        <td>内容四</td>
    </tr>
    <tr>
        <td>内容一</td>
        <td>内容二</td>
        <td>内容三</td>
        <td>内容四</td>
    </tr>
    <tr>
        <td>内容一</td>
        <td>内容二</td>
        <td>内容三</td>
        <td>内容四</td>
    </tr>
    <tr>
        <td>内容一</td>
        <td>内容二</td>
        <td>内容三</td>
        <td>内容四</td>
    </tr>
    <tr>
        <td>内容一</td>
        <td>内容二</td>
        <td>内容三</td>
        <td>内容四</td>
    </tr>
    <tr>
        <td>内容一555</td>
        <td>内容二55</td>
        <td>内容三</td>
        <td>内容四</td>
    </tr>
    </tbody>
</table>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName= "John";
        $scope.lastName= "Doe";
    });
    app.directive('scrollBarDirective',function () {
        function link($scope, element) {
            var container = element[0];
            $scope.$watch($(container), function () {
                $(container).mCustomScrollbar("destroy");
                $(container).mCustomScrollbar({
                    axis: "y",// horizontal scrollbar
                    scrollbarPosition: 'inner',
                    autoDraggerLength: false,
                    scrollInertia: 300
                });
            }, true);
        }
        return {
            restrict: 'A',
            link: link
        };
    })
/*    (function($){
        $(window).on("load",function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);*/
</script>

<!--<script src="libs/scroll-bar-directive.js"></script>-->
</body>
</html>